<!-- vue页面的布局部分 -->
<template>
  <a-form
    :model="formData"
    name="basic"
    :label-col="{ span: 24 }"
    :wrapper-col="{ span: 24 }"
    autocomplete="off"
    @finish="onFinish"
    @finishFailed="onFinishFailed"
  >
    <div id="container">
      <div id="loginwrapper">
        <div id="loginwindow">
          <div id="logi  ninfo">
            <h1>系统账号登录</h1>
            <div id="username_wrapper">
              <a-form-item
                label="用户名"
                name="username"
                :rules="[{ required: true, message: '请输入用户名' }]"
              >
                <a-input allowClear style="font-size: 25px" v-model:value="formData.username" />
              </a-form-item>
            </div>
            <div id="password_wrapper">
              <a-form-item
                label="登录密码"
                name="password"
                :rules="[{ required: true, message: '请输入密码' }]"
              >
                <a-input-password
                  allowClear
                  style="font-size: 25px"
                  v-model:value="formData.password"
                />
              </a-form-item>
            </div>
            <div id="btn_wrapper">
              <a-form-item :wrapper-col="{ offset: 70, span: 160 }">
                <a-button
                  style="
                    height: 50px;
                    width: 150px;
                    font-size: 25px;
                    box-shadow: 0px 15px 25px -5px #000;
                    border-radius: 10px;
                  "
                  type="primary"
                  html-type="submit"
                  >登录</a-button
                >
              </a-form-item>
            </div>
            <div id="a_wrapper">
              <a target="_blank" href="http://www.baidu.com/">立即注册</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </a-form>
</template>

<!-- vue页面的js代码部分 -->
<!-- vue页面的js代码部分 -->
<script setup>
import { reactive } from 'vue'
import { login } from '@/api/user'
import { setSatoken } from '@/utils/localStorageHandler.js'
import router from '@/router/index.js'
import md5 from 'md5'
const formData = reactive({
  username: 'root',
  password: '123456',
})
const onFinish = async () => {
  formData.password = md5(formData.password)
  const res = await login(formData)
  // 保存登录的令牌信息
  console.log(res)
  setSatoken(res.saTokenInfo.tokenName, res.saTokenInfo.tokenValue, res.saTokenInfo.tokenTimeout)
  router.push('/ai')
}
const onFinishFailed = (errorInfo) => {
  console.log('Failed:', errorInfo)
}
</script>

<!-- vue页面的样式部分 -->
<style scope>
#container {
  background-image: url('../assets/backgroundImg.jpg');
  background-repeat: round;
  background-size: cover;

  display: flex; /*使用flex弹性布局*/
  flex-direction: row; /*主轴为横轴*/
  justify-content: center; /*在主轴方向居中对齐*/
  align-items: center; /*在交叉轴方向居中对齐*/
}

#container {
  height: 100%;
}

#loginwrapper {
  background-image: url('../assets/loginBG.jpg');
  background-repeat: round;
  background-size: cover;
  width: 850px; /*宽度*/
  min-width: 850px; /*最小宽度*/
  height: 470px; /*高度*/
  border-radius: 10px; /*四个角变成圆角*/
  /*让子元素loginwindow从右到左排列*/
  display: flex;
  flex-direction: row-reverse;
}

#loginwindow {
  background-color: #fff;
  width: 45%;
  height: 100%;
  /*margin-left: 55%;*/
  border-radius: 10px; /*四个角变成圆角*/

  /*让子元素在主轴和交叉轴上都中对齐*/
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

#logininfo {
  width: 80%; /*让当前元素宽度占父元素宽度的80%*/
  height: 70%; /*让当前元素高度占父元素宽度的70%*/
  font-size: 16px;
  color: #6c6c6c;
  /*让子元素在主轴方向两端对齐*/
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

#btn_wrapper {
  /*使用弹性布局实现水平居中对齐*/
  /*display: flex;
    flex-direction: row;
    justify-content: center;*/
  text-align: center; /*让文本内容水平中对齐*/
}

h1,
#a_wrapper {
  text-align: center; /*让文本内容水平中对齐*/
}

/*#a_wrapper{
    text-align: center; !*让文本内容水平中对齐*!
}*/

a:link, /*平常的普通状态*/
a:active, /*激活的状态*/
a:visited {
  /*已经访问过的状态*/
  color: #6c6c6c;
  text-decoration: none;
}

a:hover {
  /*鼠标放上去的状态*/
  color: #ff0000ff;
  text-decoration: underline;
  /*font-size: 20px;*/
}

/*
作用：
   删除如下的样式，通过修改form位置解决问题
*/

form {
  height: 100%;
}
</style>
